<template>
  <div class="sentence-label">
    <span>Choose Intent:</span>

    <el-select :value="intent" @change="setIntent" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
        <span style="float: left">{{ item.label }}</span>
        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
      </el-option>
    </el-select>
  </div>
</template>

<script>
  import {mapState} from 'vuex'

  export default {
    data () {
      return {
        label: null
      }
    },
    computed: {
      ...mapState('intents', ['intents', 'intent']),
      options () {
        return this.intents.map(intent => ({
          label: intent,
          value: `"[${intent}]"`
        }))
      }
    },
    methods: {
      setIntent(intent) {
        this.$store.commit('intents/setIntent', intent)
      }
    }
  }
</script>

<style lang="less" scoped>
  div.sentence-label {
    margin: 20px 0;
    & > span {
      display: inline-block;
      width: 200px;
    }
    .el-select {
      width: 400px;
    }
  }
</style>
